<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">学生信息管理</h5>
            <button class="btn btn-primary" onclick="openStudentModal()">
                <i class="fas fa-plus"></i> 添加学生
            </button>
        </div>
        <div class="card-body">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>性别</th>
                        <th>班级</th>
                        <th>年级</th>
                        <th>专业</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="student : ${students}">
                        <td th:text="${student.id}"></td>
                        <td th:text="${student.name}"></td>
                        <td th:text="${student.age}"></td>
                        <td th:text="${student.gender}"></td>
                        <td th:text="${student.className}"></td>
                        <td th:text="${student.gradeName}"></td>
                        <td th:text="${student.majorName}"></td>
                        <td>
                            <button class="btn btn-sm btn-warning btn-action" th:onclick="'editStudent(' + ${student.id} + ')'">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button class="btn btn-sm btn-danger btn-action" th:onclick="'deleteStudent(' + ${student.id} + ')'">
                                <i class="fas fa-trash"></i>
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- 添加/编辑学生模态框 -->
    <div class="modal fade" id="studentModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">学生信息</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="studentForm">
                        <input type="hidden" id="studentId">
                        <div class="form-group">
                            <label>姓名</label>
                            <input type="text" class="form-control" id="name" required>
                        </div>
                        <div class="form-group">
                            <label>年龄</label>
                            <input type="number" class="form-control" id="age" required>
                        </div>
                        <div class="form-group">
                            <label>性别</label>
                            <select class="form-control" id="gender" required>
                                <option value="">请选择性别</option>
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>班级</label>
                            <select class="form-control" id="classId" required>
                                <option value="">请选择班级</option>
                                <option th:each="class : ${classes}" 
                                        th:value="${class.id}" 
                                        th:text="${class.className}">
                                </option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>年级</label>
                            <select class="form-control" id="gradeId" required>
                                <option value="">请选择年级</option>
                                <option th:each="grade : ${grades}" 
                                        th:value="${grade.id}" 
                                        th:text="${grade.gradeName}">
                                </option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>专业</label>
                            <select class="form-control" id="majorId" required>
                                <option value="">请选择专业</option>
                                <option th:each="major : ${majors}" 
                                        th:value="${major.id}" 
                                        th:text="${major.majorName}">
                                </option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="saveStudent()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        function openStudentModal(id) {
            if (id) {
                $.get('/student/' + id, function(data) {
                    $('#studentId').val(data.id);
                    $('#studentName').val(data.name);
                    $('#studentAge').val(data.age);
                    $('#studentGender').val(data.gender);
                    $('#studentClass').val(data.classId);
                    $('#studentMajor').val(data.majorId);
                    $('#studentModal').modal('show');
                });
            } else {
                $('#studentForm')[0].reset();
                $('#studentId').val('');
                $('#studentModal').modal('show');
            }
        }

        function saveStudent() {
            var student = {
                id: $('#studentId').val(),
                name: $('#studentName').val(),
                age: $('#studentAge').val(),
                gender: $('#studentGender').val(),
                classId: $('#studentClass').val(),
                majorId: $('#studentMajor').val()
            };

            var url = student.id ? '/student' : '/student';
            var method = student.id ? 'PUT' : 'POST';

            $.ajax({
                url: url,
                type: method,
                contentType: 'application/json',
                data: JSON.stringify(student),
                success: function() {
                    $('#studentModal').modal('hide');
                    loadContent('student');
                }
            });
        }

        function deleteStudent(id) {
            if(confirm('确定要删除这条记录吗？')) {
                $.ajax({
                    url: '/student/' + id,
                    type: 'DELETE',
                    success: function() {
                        loadContent('student');
                    }
                });
            }
        }
    </script>
</body>
</html> 